<template>
    <fieldset>
        <legend>Cart</legend>
        <ul>
            <li v-for="item in carts" :key="item.id">
                <p ><b style="color:red">>产品名称:</b> {{item.title}} </p>
                <p ><b style="color:red">>产品数量:</b> {{item.count}} </p>
                <p ><b style="color:red">>产品单价:</b> {{item.price}} </p>
                <button @click="remove(item)">删减</button>

            </li>
        </ul>
        <h1>
            <span style="color:red">
                金额: {{total}}
            </span>
        </h1>
    </fieldset>
</template>
<script>
// 引入 mapState 辅助函数
// 引入 mapActions 辅助函数
// 引入 mapGetters 辅助函数
    import{ mapState , mapActions , mapGetters } from "vuex" 
export default{
    computed: {
        ...mapState('cart',['carts']),  // ... 展开运算符
        ...mapGetters('cart',['total'])
    },
    methods: {
        ...mapActions('cart',['REMOVE_CART']),
        remove(item){
            // console.log(item)
            this.REMOVE_CART(item)
        },
    }

}
</script>